<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
    <select class="provinces"></select>
    <select class="schools"></select>
    <script type="text/javascript">
        $.ajax({
            "url": "/myprovince",
            "type": "GET",
            "dataType": "json"
        }).done(function (data) {
            for(index in data){

                var province = data[index];

                var opt = "<option value='" + province.id + "'>" + province.name + "</option>";
                $(".provinces").append(opt);
               }
               scl();
             }).fail();
        $(".provinces").change(scl);

        function scl () {
            $(".schools").empty();
            $.ajax({
                "url": "/schoolservlet",
                "type": "POST",
                "data": {"pid":$(".provinces").val()},
                "dataType": "json"
            }).done(function (data) {
                for(index in data){
                    console.log(data);
                    var school = data[index];
                    var opt = "<option>"+school.name+"</option>"
                    $(".schools").append(opt);
                }

            }).fail();


        }
        
    </script>
</body>
</html>